<template>
<div class="commentContainer">
  <var-app-bar title="title">
    <template #left>
      <var-button
          round
          text
          color="transparent"
          text-color="#fff"
          @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>

  <TopicCard :data="data" :is-comment="true"/>

  <Divide/>

</div>
</template>

<script lang="ts" setup>

import router from "@/router";
import {onMounted, ref} from "vue";
import TopicCard from "@/components/TopicCard.vue";
import Divide from "@/components/Divide.vue";
import {useRoute} from "vue-router";
import {getByTopicId} from "@/api/commentAPI";

const data = ref({})

const goBack = () => {
  router.back()
}
onMounted(() => {
  data.value = useRoute().query
  getByTopicId(data.value.topicId)
      .then(res => {
        console.log(res)
      })
})
</script>

<style scoped>
.commentContainer{

}
</style>